<template>
    <div class="xtx-goods-page">
        <div class="container">
            <Breadcrumb v-if="!$U.isEmptyObj(detail)" :detail="detail" />
            <!-- 商品信息 -->
            <Info v-if="!$U.isEmptyObj(detail)" :detail="detail">
                <template v-slot:hot>
                    <Hot :hotGoods="hotTimeGoods" :type="1" />
                    <Hot :hotGoods="hotWeekGoods" :type="2" class="mt" />
                </template>
            </Info>
        </div>
    </div>
</template>

<script setup>
import Breadcrumb from './components/breadcrumb.vue';
import Info from './components/info.vue'
import Hot from './components/hot.vue';

import { storeToRefs } from 'pinia';
import { useDetailStore } from '@/stores/detail';

const detailStore = useDetailStore();
const { detail, hotTimeGoods, hotWeekGoods } = storeToRefs(detailStore);

const { proxy } = getCurrentInstance();

const $U = proxy.$U

// 获取参数
const route = useRoute()

watch(() => route.params.id,
    (newVal, oldVal) => {
        detailStore.getDetailData(newVal);
        detailStore.getHotGoodsData({
            id: route.params.id,
            type: 1,   // 24小时热榜
        });
        detailStore.getHotGoodsData({
            id: route.params.id,
            type: 2,   // 周热销榜
        });
    },
    { immediate: true }
)
</script>

<style scoped lang='scss'>
.xtx-goods-page {
    .mt {
        margin-top: 20px;
    }
}
</style>